import React from 'react';
import {
  View,
  Text,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';

import WH_BasePage from './WH_BasePage';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import {HtmlUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import WH_RequestContentAction from '../../actions/workhard/WH_RequestContentAction';

export default class WH_CYSPage extends WH_BasePage {
  constructor(props) {
    super(props);

    this.state.contentData = {post_id:"59382d6affc3c47797e84ae3"};

    this._topImageWidth = SizeUtils.getWindowSize().width,
    this._topImageHeight = SizeUtils.getWindowSize().width * 694 / 750;

    this._bottomImageWidth = SizeUtils.getWindowSize().width,
    this._bottomImageHeight = SizeUtils.getWindowSize().width * 672 / 750;

    this._numBottom = SizeUtils.getWindowSize().width * 40 / 750;
    this._backgroudColor = "#ffffff00";

    this.state.contentHeight = 0;
  }

  componentDidMount() {
    this._requestData();
  }

  _dealRender() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
        height:SizeUtils.getWindowSize().height}}>
        <ScrollView style={{width:SizeUtils.getWindowSize().width, backgroundColor:"#ffffff",
          height:SizeUtils.getWindowSize().height}}
            contentContainerStyle={{backgroundColor:"#fff5a6"}}>
            <View style={{flexDirection:"column"}}>
              {this._renderTopImage()}
              {this._renderBottomImage()}
              {this._renderContent()}
              {this._renderReadNum()}
              {this._renderBack()}
            </View>
          {/* {this._renderTopBar()} */}
          {/* {this._renderStatusBar("light-content","#494851")} */}
        </ScrollView>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _dealEnterPage() {
    this._requestData();
  }

  _onPressBack() {
    this.goBack();
  }

 _renderBack(){
  return (<View style={{width:SizeUtils.getWindowSize().width,position:"absolute"
    ,top:Config.tabBarTop,left:0}}>
          <TouchableOpacity onPress={this.goBack.bind(this)}
           style={{paddingLeft:SizeUtils.translateDesignWidthToCode(40),
                width:SizeUtils.translateDesignWidthToCode(100)}}>
             <TImage source={require("../../../resource/images/common/Back-icon2.png")}
              style={{width:24, height:41}}/>
          </TouchableOpacity>
      </View>)
  }

  _renderTopImage() {
    return (
      <View>
        <TImage source={require("../../../resource/images/workhard/red_book_bg1.png")}
          style={{width:this._topImageWidth, height:this._topImageHeight}} translatedSize={true} />
      </View>
    )
  }

  _renderBottomImage() {
    let paddingTop = 0;
    if(this.state.contentHeight > 0) {
      paddingTop = this.state.contentHeight - SizeUtils.translateDesignHeightToCode(500);
    }
    return (
      <View style={{paddingTop:paddingTop}}>
        <TImage source={require("../../../resource/images/workhard/red_book_bg2.png")}
          style={{width:this._bottomImageWidth, height:this._bottomImageHeight}} translatedSize={true} />
      </View>
    )
  }

  _renderReadNum() {
    let readNum = this.state.contentData.readers_num ? this.state.contentData.readers_num : "0";
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"row", alignItems:"center", justifyContent:"center",
          position:"absolute", bottom:this._numBottom,
              backgroundColor:"#00000000",}}>
          <Text style={{ color:"#ffffff", fontSize:SizeUtils.translateFontSizeToCode(56),
              height:SizeUtils.translateDesignHeightToCode(67),
              fontWeight:"bold", textAlign:"center",}}>
              {readNum}
          </Text>
      </View>
    )
  }

  _renderContent() {
    return(
      <View style={{
          paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
          backgroundColor:"#00000000",
          position:"absolute", top:this._topImageHeight - SizeUtils.translateDesignHeightToCode(250),
          }} onLayout={this._onContentLayout.bind(this)}>
        {/* {this._renderContentHead()} */}
        {this._renderContentFormal()}
        {this._renderConentTest()}
      </View>
    )
  }

  _renderContentFormal() {
    if(this.state.contentData.content) {
      return (
        <View>
          {this._renderContentText(HtmlUtils.contentFormat(this.state.contentData.content))}
           {/* {this._renderContentText("大庆油田有限责任公司工会", true)}
           {this._renderContentText("大庆油田有限责任公司团委", true)}
           {this._renderContentText("2017年2月4日", true)} */}
        </View>
      )
    }
  }

  _renderConentTest() {
    if(this.state.contentData.content) {
      return;
    }
    return (
      <View>
        {this._renderContentText("广大工会会员、团员青年朋友们：")}
        {this._renderContentText("    大庆是大庆人的大庆，大庆的发展我们共同参与，大庆的困难我们共同应对。刚刚闭幕的党代会、职代会提出了“当好标杆旗帜，建设百年油田”的总体目标，开启了推进振兴发展的新征程。作为油田的一员，我们要进一步增强危机感、责任感、使命感，想主人事、干主人活、尽主人责，自觉与企业同呼吸共命运。为此公司工会、团委发出如下倡议：")}
        {this._renderContentText("    从一言一行做起，践行优良传统。学习会战艰苦奋斗好传统，首创提质增效理念用语，形成良好氛围。领导干部带好头，团员青年勇争先，人人争当表率，全员一起行动。")}
        {this._renderContentText("    从一点一滴省起，养成节俭习惯。倡导“省下就是赚到”的理念，从节约一滴水、一滴油、一度电、一张纸、一粒米做起，时时节约、处处节约、事事节约。")}
        {this._renderContentText("    从一机一物爱起，维护生产设施。爱护机器设备，摸清运行状况，杜绝跑冒滴漏，降低修保费用。科学计算，合理使用，挖潜降耗，避免易耗品的浪费。")}
        {this._renderContentText("    从一钉一铆存起，搞好修旧利废。不随便丢弃一颗螺丝钉，不轻易忽视一个废零件，坚持建立“百宝箱”“聚宝盆”，人人修旧利旧，变废为宝。")}
        {this._renderContentText("    从一患一障查起，消除安全隐患。强化“安全是最大效益”的思想，增强岗位责任心，查找身边的小隐患、小故障，杜绝身边的小麻痹、小疏忽，保质量、保安全、保效益。")}
        {this._renderContentText("    从一计一策献起，投身小改小革。发挥聪明才智，钻研新技术、新工艺、新方法，提出小革新、小发明、小改造、小设计、小建议，立足岗位，创新创效。")}
        {this._renderContentText("    从一技一能学起，练就过硬本领。勤学苦练，提升技能，争做一专多能、一岗多能、岗岗精通的高素质人才，做到精准发力、精准创效，实现岗位价值和企业效益最大化。")}
        {this._renderContentText("    从一会一话抓起，提高质量效率。提倡视频网络会议，开短会、说短话，提高会议质量。精简文件简报，推行无（少）纸化办公，推广电子文件，不煲“电话粥”，提高工作效率。")}
        {this._renderContentText("    从一餐一车减起，降低办公支出。倡导节俭出差，节俭用餐、节俭住宿、节俭出行。精简公务用车，规范公务招待，节俭举办各类活动。")}
        {this._renderContentText("    广大工会会员、团员青年朋友们，面对新形势、新任务、新机遇、新要求，我们要“撸起袖子加油干”，传统立身，勤俭立业，百年立功，勇当创效先锋。让我们从自身做起、从岗位做起、从现在做起、从小事做起，贡献金点子、打好算盘子、撑满钱袋子，为实现“当好标杆旗帜，建设百年油田”奋斗目标汇聚智慧力量！")}
        {/* {this._renderContentText("大庆油田有限责任公司工会", true)}
        {this._renderContentText("大庆油田有限责任公司团委", true)}
        {this._renderContentText("2017年2月4日", true)} */}
      </View>
    )
  }

  _renderContentText(text, isRight) {
    let align = isRight ? "right" : "left";
    return(
      <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#000000",
          textAlign:align, lineHeight:SizeUtils.translateFontSizeToCode(40)}}>
        {text}
      </Text>
    )
  }

  _renderContentHead() {
    return(
      <View style={{flexDirection:"row", paddingBottom:SizeUtils.translateDesignHeightToCode(30), alignItems:"center"}}>
        <View style={{width:SizeUtils.translateDesignWidthToCode(8), height:SizeUtils.translateDesignHeightToCode(30),
          backgroundColor:"#db3132"}}>
        </View>
        <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(12), fontSize:SizeUtils.translateFontSizeToCode(32),
            fontWeight:"bold", color:"#000000"}}>
          倡议书
        </Text>
      </View>
    )
  }

  _requestData() {
    new WH_RequestContentAction().call(this, {post_id:this.state.contentData.post_id});
  }

  //nativeEvent: { layout: {x, y, width, height}}
  _onContentLayout(event) {
    this.setState({
      contentHeight:event.nativeEvent.layout.height,
    });
  }
}
